<template>
	<view class="zh-auth-certify">
		<image :src="IMG_URL + '/auth/banner.png'" class="banner"/>
		<view class="flow">
			<view class="zh-flow display-flex justify-between align-center">
				<view class="item active">
					<text class="font-24">填写信息</text>
				</view>
				<view class="line flex"></view>
				<view class="item">
					<text class="font-24">等待审批</text>
				</view>
				<view class="line flex"></view>
				<view class="item">
					<text class="font-24">认证结果</text>
				</view>
			</view>
		</view>
		<view class="section type">
			<view class="title">
				<text class="font-30 font-bold font-1769ff">选择认证业务类型</text>
				<text class="font-24 ml-10 font-1769ff">（至少选择一项，可多选）</text>
			</view>
			<view class=" content display-flex justify-between flex-wrap">
				<u-checkbox :sizePercent="0.9" name="商城卖家" class="item" @change="selectsell" :checked="shopInfoData.form.isbusiness == '1'"></u-checkbox>
				<u-checkbox :sizePercent="0.9" name="商城买家" class="item" @change="selectbuyer" :checked="shopInfoData.form.isbuyer == '1'"></u-checkbox>
				<u-checkbox :sizePercent="0.9" name="开证公司" class="item" @change="selectOpcer" :checked="shopInfoData.form.isopcer == '1'"></u-checkbox>
				<u-checkbox :sizePercent="0.9" name="国外代理" class="item" @change="selectAgent" :checked="shopInfoData.form.isagent == '1'"></u-checkbox>
				<u-checkbox :sizePercent="0.9" name="货代公司" class="item" @change="selectHuodai" :checked="shopInfoData.form.ishuodai == '1'"></u-checkbox>
				<u-checkbox :sizePercent="0.9" name="仓储公司" class="item" @change="selectStorage" :checked="shopInfoData.form.isstorage == '1'"></u-checkbox>
				<u-checkbox :sizePercent="0.9" name="业务客户" class="item" @change="selectBussiness" :checked="shopInfoData.form.iscustom == '1'"></u-checkbox>
			</view>
		</view>
		<view class="section mes">
			<view class="title">
				<text class="font-30 font-bold font-1769ff">企业详细信息</text>
			</view>
			<u-form>
				<u-input title="企业注册名称" placeholder="请填写营业执照上的全称" :arrow="false" v-model="shopInfoData.form.allname" labelWidth="200" :rules="shopInfoData.rules.allname"></u-input>
				<u-input title="企业税号" placeholder="请填写18位统一社会信用代码" :arrow="false" v-model="shopInfoData.form.qtaxnum" labelWidth="200" :rules="shopInfoData.rules.qtaxnum"></u-input>
				<u-input title="企业法人" placeholder="请填写企业法人姓名" :arrow="false" v-model="shopInfoData.form.qlegalperson" labelWidth="200" :rules="shopInfoData.rules.qlegalperson"></u-input>
				<u-select title="企业地址" placeholder="所在地区" @click="pickArea" :arrow="false" :value="shopInfoData.pickAreaStr" labelWidth="200" :rules="shopInfoData.rules.alladdr3"></u-select>
				<u-input title="详细街道" placeholder="请填写企业地址的详细街道信息" :arrow="false" :border="false" v-model="shopInfoData.form.alladdrfull" labelWidth="200" :rules="shopInfoData.rules.alladdrfull"></u-input>
			</u-form>
		</view>
		<view class="section bank">
			<view class="title">
				<text class="font-30 font-bold font-1769ff">企业银行信息</text>
			</view>
			<u-form>
				<u-input title="开户银行" placeholder="请填写企业的开户银行名称" :arrow="false" v-model="shopInfoData.form.allbankname" labelWidth="200" :rules="shopInfoData.rules.allbankname"></u-input>
				<u-input title="银行账号" placeholder="请填写银行账号" :arrow="false" :border="false" v-model="shopInfoData.form.allbankaccount" labelWidth="200" :rules="shopInfoData.rules.allbankaccount"></u-input>
			</u-form>
		</view>
		<view class="section link">
			<view class="title">
				<text class="font-30 font-bold font-1769ff">联系人信息</text>
			</view>
			<u-form>
				<u-input title="联系人姓名" placeholder="请填写联系人姓名" :arrow="false" v-model="shopInfoData.form.allpeople" labelWidth="200" :rules="shopInfoData.rules.allpeople"></u-input>
				<u-input title="联系人手机号" placeholder="请填写联系人手机号码" :arrow="false" v-model="shopInfoData.form.allphone1" labelWidth="200" :rules="shopInfoData.rules.allphone1"></u-input>
				<!-- <u-input title="验证码" placeholder="请填写验证码" :arrow="false" :border="false"></u-input> -->
			</u-form>
		</view>
		<view class="section resouce">
			<view class="title">
				<text class="font-30 font-bold font-1769ff">企业资料信息</text>
			</view>
			<view class="box font-24">
				<view>• 支持JPG/PNG/JPRG格式的图片</view>
				<view class="mt-20">• 大小≤5M</view>
				<view class="mt-20">
					<text>• 上传的图片是彩色扫描件或复印件,</text>
					<text class="font-EC1010 font-bold">【必须加盖公章】</text>
				</view>
			</view>
			<u-form class="upload">
				<view class="name display-flex align-center">
					<text>营业执照影印件</text>
					<text class="red ml-10">*</text>
				</view>
				<view class="display-flex justify-between">
					<view class="content">
						<u-upload-file :count="1" @click="uploadQbusinesslicence">
							<view>
								<view class="file-add-box" v-if="previewImgs.qbusinesslicence">
									<image :src="previewImgs.qbusinesslicence" class="preview-img"/>
								</view>
								<view class="file-add-box" v-if="!previewImgs.qbusinesslicence">
									<view class="file-add-inner-box">
										<text class="font-40 display-block font-1769ff font-bold text-add">+</text>
										<text class="font-28 font-1769ff">上传营业执照</text>
									</view>
								</view>
							</view>
						</u-upload-file>
					</view>
					<view class="content">
						<view class="file-add-box"  @click="fileImgShow(0)">
							<view class="file-add-inner-box">
								<image :src="IMG_URL + '/auth/business_licence.png'" class="demo-img"/>
								<text class="font-22 font-666">示意图</text>
							</view>
						</view>
					</view>
				</view>
				<view class="name display-flex align-center">
					<text>开票资料</text>
					<text class="red ml-10">*</text>
				</view>
				<view class="display-flex justify-between">
					<view class="content">
						<u-upload-file :count="1" @click="uploadAllinvoicei">
							<view class="display-flex ">
								<view class="file-add-box" v-if="previewImgs.allinvoicei">
									<image :src="previewImgs.allinvoicei" class="preview-img"/>
								</view>
								<view class="file-add-box" v-if="!previewImgs.allinvoicei">
									<view class="file-add-inner-box">
										<view></view>
										<text class="font-40 display-block font-1769ff font-bold text-add">+</text>
										<text class="font-28 font-1769ff">上传开票资料</text>
									</view>
								</view>
							</view>
						</u-upload-file>
					</view>
					<view class="content">
						<view class="file-add-box"  @click="fileImgShow(1)">
							<view class="file-add-inner-box">
								<image :src="IMG_URL + '/auth/invoice.png'" class="demo-img"/>
								<text class="font-22 font-666">示意图</text>
							</view>
						</view>
					</view>
				</view>
				<view class="name display-flex justify-between">
					<view class="display-flex align-center">
						<text>授权书</text>
						<text class="red ml-10">*</text>
					</view>
					<view @click="downloadQauthbook">
						<text class="text-decoration font-1769ff font-24">授权书下载链接</text>
					</view>
				</view>
				<view class="display-flex justify-between">
					<view class="content">
						<u-upload-file :count="1" @click="uploadQauthbook">
							<view class="display-flex">
								<view class="file-add-box" v-if="previewImgs.qauthbook">
									<image :src="previewImgs.qauthbook" class="preview-img"/>
								</view>
								<view class="file-add-box" v-if="!previewImgs.qauthbook">
									<view class="file-add-inner-box">
										<text class="font-40 display-block font-1769ff font-bold text-add">+</text>
										<text class="font-28 font-1769ff">上传授权书</text>
									</view>
								</view>
							</view>
						</u-upload-file>
					</view>
					<view class="content">
						<view class="file-add-box" @click="fileImgShow(2)">
							<view class="file-add-inner-box">
								<image :src="IMG_URL + '/auth/qauth_book.png'" class="demo-img"/>
								<text class="font-22 font-666">示意图</text>
							</view>
						</view>
					</view>
				</view>
			</u-form>
			<view class="display-flex mt-60 ml-30 mr-30">
				<u-checkbox class="agree" :sizePercent="0.6" @change="changeAgree" :checked="checked" color="#1769ff"></u-checkbox>
				<view class="font-24 ml-10">
					<text>提交即同意企业认证通过后，企业用户可以进行采购、销售等功能操作，该用户所有相关活动视为企业行为！</text>
				</view>
			</view>
			<view class="mt-40">
				<button class="app-primary-button" hover-class="app-primary-button-active" @click="submit">确认提交</button>
			</view>
		</view>
		<picker-area :show="pickAreaData.show" @close="changePickAreaShow" @pickOne="pickOne"></picker-area>
		<imgs-preview :imgs="generalImgs.fileImgs" :show="generalImgs.show" :current="generalImgs.index" @close="changeFileImgShow"></imgs-preview>
	</view>
</template>

<script setup lang="ts">
	import { auth, fileApi } from'@/api'
	import { onLoad } from '@dcloudio/uni-app';
	import { reactive, computed, ref } from 'vue';
	import { tip, system, util } from '@/utils'
	import { useAuthStore } from '@/store/auth'
	import { IMG_URL } from '@/utils/constant'
	
	const authStore = useAuthStore()
	const checked = ref(false)
	
	const generalImgs = reactive({
		show:false,
		fileImgs:[
			IMG_URL + '/auth/business_licence.png',
			IMG_URL + '/auth/invoice.png',
			IMG_URL + '/auth/qauth_book.png'
		],
		index:0
	})
	
	const shopInfoData:any = reactive({
		rules:{
			allname:[{required:true,message:'请填写企业注册名称！'}],
			qtaxnum:[{required:true,message:'请填写企业税号！'}],
			qlegalperson:[{required:true,message:'请填写企业法人！'}],
			alladdr3:[{required:true,message:'请填写企业地址！'}],
			alladdrfull:[{required:true,message:'请填写详细街道！'}],
			allbankname:[{required:true,message:'请填写开户银行！'}],
			allbankaccount:[{required:true,message:'请填写银行账号！'}],
			allpeople:[{required:true,message:'请填写联系人姓名！'}],
			allphone1:[
				{required:true,message:'请填写联系人手机号码！'},
				{pattern:/^(?:(?:\+|00)86)?1\d{10}$/,message:'请输入正确的手机号码！'}
			],
			qbusinesslicence:[{required:true,message:'请上传营业执照！'}],
			allinvoicei:[{required:true,message:'请上传开票资料！'}],
			qauthbook:[{required:true,message:'请上传授权书！'}],
		},
		form: {
			abbreviation: "",
			alladdr1: "",
			alladdr2: "",
			alladdr3: "",
			alladdrfull: "",
			allbankaccount: "",
			allbankaddr1: "",
			allbankaddr2: "",
			allbankname: "",
			allemail: "",
			allidcard: "",
			allinvoicei: "",
			alllogo: "",
			allname: "",
			allpeople: "",
			allphone1: "",
			belong: "",
			dztime: "",
			id: "",
			isagent: "",
			isbusiness: "",
			isbuyer: "",
			iscustom: "",
			ishuodai: "",
			isopcer: "",
			isplat: "",
			issell: "",
			isservicestatus: "",
			issh: "",
			isstorage: "",
			iswms: "",
			line: "",
			q3is1: "",
			qauthbook: "",
			qbanki: "",
			qbusinesslicence: "",
			qcapital: "",
			qcapitalbz: "",
			qcertnum: "",
			qcomptype: "",
			qlegalperson: "",
			qorgi: "",
			qtaxi: "",
			qtaxnum: "",
			reject: "",
			servicetype: "",
			shopname: "",
			shopnum: "",
			status: "",
			wmsstop: "",
		},
		pickAreaStr:'',
	})
	
	const previewImgs:any = reactive({
		allinvoicei:'',
		qauthbook:'',
		qbusinesslicence:''
	})
	
	const pickAreaData = reactive({
		show:false
	})
	
	onLoad((options:any) => {
		if(options.type == 'reApply') {
			shopInfo()
		}
	})
	
	const shopInfo = () => {
		auth.getShopInfo().then(((res:any) => {
			const data = res.data
			shopInfoData.form = data
			const areaArr = util.getArea(data.alladdr1,data.alladdr2,data.alladdr3)
			shopInfoData.pickAreaStr = areaArr[0] + areaArr[1] + areaArr[2]
			const arr = [data.allinvoicei, data.qauthbook, data.qbusinesslicence]
			fileUrl(arr)
		}))
	}
	
	const fileUrl = (arr:any) => {
		fileApi.getFileUrl(arr).then((res:any) => {
			const data = res.data
			previewImgs.allinvoicei = data[shopInfoData.form.allinvoicei]
			previewImgs.qauthbook = data[shopInfoData.form.qauthbook]
			previewImgs.qbusinesslicence = data[shopInfoData.form.qbusinesslicence]
		})
	}
	
	const fileImgShow = (index:number) => {
		generalImgs.index = index
		changeFileImgShow()
	}
	
	const changeFileImgShow = () => {
		generalImgs.show = !generalImgs.show
	}
	
	const changePickAreaShow = () => {
		pickAreaData.show = !pickAreaData.show
	}
	
	const pickArea = () => {
		changePickAreaShow()
	}
	
	const pickOne = (data: any) => {
		changePickAreaShow()
		shopInfoData.form.alladdr1 = data[0].id
		shopInfoData.form.alladdr2 = data[1].id
		shopInfoData.form.alladdr3 = data[2].id
		shopInfoData.pickAreaStr = data[0].value + data[1].value + data[2].value
		
	}
	
	
	const changeAgree = (e: any) => {
		checked.value = !checked.value
	}
	
	const selectsell = (value:string) => {
		shopInfoData.form.isbusiness = value.length > 0?'1':'0'
	}
	const selectbuyer = (value:string) => {
		shopInfoData.form.isbuyer = value.length > 0?'1':'0'
	}
	const selectOpcer = (value:string) => {
		shopInfoData.form.isopcer = value.length > 0?'1':'0'
	}
	const selectAgent = (value:string) => {
		shopInfoData.form.isagent = value.length > 0?'1':'0'
	}
	const selectHuodai = (value:string) => {
		shopInfoData.form.ishuodai = value.length > 0?'1':'0'
	}
	const selectStorage = (value:string) => {
		shopInfoData.form.isstorage = value.length > 0?'1':'0'
	}
	const selectBussiness = (value:string) => {
		shopInfoData.form.iscustom = value.length > 0?'1':'0'
	}
	
	const uploadQbusinesslicence = (data: any) => {
		shopInfoData.form.qbusinesslicence = data.url
		previewImgs.qbusinesslicence = data.convertedUrl
	}
	
	const uploadAllinvoicei = (data: any) => {
		shopInfoData.form.allinvoicei = data.url
		previewImgs.allinvoicei = data.convertedUrl
	}
	
	const uploadQauthbook = (data: any) => {
		shopInfoData.form.qauthbook = data.url
		previewImgs.qauthbook = data.convertedUrl
	}
	
	const submit = () => {
		const rules = shopInfoData.rules
		const form = shopInfoData.form
		if(!shopInfoData.form.isbusiness 
			&& !shopInfoData.form.isbuyer 
			&& !shopInfoData.form.isopcer 
			&& !shopInfoData.form.isagent 
			&& !shopInfoData.form.ishuodai 
			&& !shopInfoData.form.isstorage
			&& !shopInfoData.form.iscustom)
		{
			return tip.showToast('至少选择一项业务！')
		}
		
		for(let i in rules) {
			for(let j in rules[i] ) {
				if(rules[i][j].required === true && !form[i]) {
					return tip.showToast(rules[i][j].message)
				}
				if(rules[i][j].pattern) {
					if(!rules[i][j].pattern.test(form[i])) {
						return tip.showToast(rules[i][j].message)
					}
				}
			}
		}
		if(!checked.value) return tip.showToast('请先同意企业认证协议！')
		
		auth.certify(shopInfoData.form).then((res:any) => {
			authStore.setUserInfo()
			uni.redirectTo({url:'/pages/auth/certifyDetail'})
		})
	}
	
	const downloadQauthbook = () => {
		const domain = import.meta.env.VITE_APP_DOMAIN
		const data = domain + '/word/授权书模板.docx'
		uni.setClipboardData({
		    data: data , //
		    success: () => {
		        uni.getClipboardData({
		            success:(res:any) => {
		                console.log(res)
						tip.showToast('已复制链接，请到电脑端下载打印盖章')
		            }
		        })
		    }
		})
	}
	
</script>

<style lang="scss" scoped>
	.check-box-label {
		font-size:10rpx;
		color:#ff0000 !important;
	}
	.zh-auth-certify {
		padding-bottom:150rpx;
		.banner {
			width:100%;
			height:164rpx;
		}
		.flow {
			margin:48rpx 80rpx;
			.zh-flow {
				padding-bottom: 40rpx;
				.line {
					background-color: $uni-color-primary;
					height:2rpx;
				}
				.item {
					width: 14rpx;
					height: 14rpx;
					box-sizing: border-box;
					background-color: #fff;
					border:1rpx solid $uni-color-primary;
					border-radius: 50%;
					position:relative;
					&.active {
						width:38rpx;
						height: 38rpx;
						background-color: #fff;
						border:11rpx solid $uni-color-primary;
					}
					text {
						position: absolute;
						white-space:nowrap;
						transform: translateX(-40%);
						margin-top: 40rpx;
					}
				}
			}
		}
		.section  {
			background-color: $uni-bg-card-color;
			padding:40rpx 0 0;
			margin-top: 20rpx;
			.title {
				padding:0 30rpx 20rpx;
			}
		}
		.type {
			padding-bottom:30rpx;
			.content {
				padding:0 120rpx 0 30rpx;
			}
			.item {
				margin-top: 43rpx;
				font-size:26rpx;
			}
		}
		.resouce {
			.box {
				background-color:#F5F5F7;
				border-radius: 8px;
				padding:25rpx 28rpx  27rpx;
				margin:0 30rpx;
			}
			.upload {
				margin-top: 60rpx;
				.name {
					font-size: 26rpx;
					font-weight:bold;
					margin-top: 40rpx;
					.red {
						color:#ff0000;
					}
				}
				.content {
					margin-top: 20rpx;
					.file-add-box {
						width: 266rpx;
						height: 266rpx;
						background-color:#f6f6f6;
						border-radius:10rpx;
						padding:20rpx;
						overflow: hidden;
						.file-add-inner-box {
							width:266rpx;
							height: 266rpx;
							text-align: center;
							border-radius:10rpx;
							background-color: #fff;
							.text-add {
								padding-top:70rpx;
							}
							.demo-img {
								width: 100%;
								height: 220rpx;
								display:block;
								font-size:0;
							}
						}
						.preview-img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			
		}
	}
</style>
